<script lang="ts" setup>
import { onMounted } from '@vue/runtime-core'

onMounted(() => {})
</script>

<template>
  <div class="row" style="border-top: 0px"></div>
  <div class="row"></div>
  <div class="row" style="background: #fff"></div>
  <div class="row"></div>
  <div class="row" style="margin-bottom: 0px; border-bottom: 0px"></div>
  <div class="column" style="left: 80px"></div>
  <div class="column" style="left: 240px"></div>
  <div class="column" style="left: 400px"></div>
  <div class="column" style="left: 480px; border-left: 0px"></div>
  <div class="slash" style="top: 0px; left: 240px; transform: rotateZ(45deg)"></div>
  <div class="slash" style="top: 0px; left: 400px; transform: rotateZ(135deg)"></div>
  <div class="slash" style="bottom: 0px; left: 240px; transform: rotateZ(-45deg)"></div>
  <div class="slash" style="bottom: 0px; left: 400px; transform: rotateZ(-135deg)"></div>

  <div class="corner" style="top: 238px"></div>
  <div class="corner" style="top: 480px"></div>

  <div class="corner reverseCorner" style="top: 240px; right: 0px"></div>
  <div class="corner reverseCorner" style="top: 482px; right: 0px"></div>
  <div class="corner" style="top: 160px; left: 82px"></div>
  <div class="corner reverseCorner" style="top: 162px; left: 80px"></div>
  <div class="corner" style="top: 160px; left: 560px"></div>
  <div class="corner reverseCorner" style="top: 162px; left: 558px"></div>

  <div class="corner" style="top: 558px; left: 82px"></div>
  <div class="corner reverseCorner" style="top: 560px; left: 80px"></div>
  <div class="corner" style="top: 558px; left: 560px"></div>
  <div class="corner reverseCorner" style="top: 560px; left: 558px"></div>

  <div class="corner" style="top: 238px; left: 160px"></div>
  <div class="corner reverseCorner" style="top: 240px; left: 158px"></div>
  <div class="corner" style="top: 480px; left: 160px"></div>
  <div class="corner reverseCorner" style="top: 482px; left: 158px"></div>

  <div class="corner" style="top: 238px; left: 320px"></div>
  <div class="corner reverseCorner" style="top: 240px; left: 318px"></div>
  <div class="corner" style="top: 480px; left: 320px"></div>
  <div class="corner reverseCorner" style="top: 482px; left: 318px"></div>

  <div class="corner" style="top: 238px; left: 480px"></div>
  <div class="corner reverseCorner" style="top: 240px; left: 478px"></div>
  <div class="corner" style="top: 480px; left: 480px"></div>
  <div class="corner reverseCorner" style="top: 482px; left: 478px"></div>
</template>
<style scoped>
.row {
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
  height: 80px;
  margin-bottom: 80px;
  box-sizing: border-box;
}
.column {
  border-left: 2px solid #666;
  border-right: 2px solid #666;
  height: 100%;
  width: 80px;
  top: 0px;
  position: absolute;
  z-index: -1;
  box-sizing: border-box;
}
.slash {
  height: 0px;
  border-top: 1px solid #666;
  background: #666;
  position: absolute;
  width: 226px;
  transform-origin: top left;
}
.corner {
  position: absolute;
  height: 30px;
}
.corner:before {
  position: absolute;
  content: ' ';
  top: -14px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-left: 2px solid #666;
  border-bottom: 2px solid #666;
}
.corner:after {
  position: absolute;
  content: ' ';
  top: 4px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #666;
  border-left: 2px solid #666;
}
.reverseCorner {
  transform: rotateZ(180deg);
  transform-origin: top;
}
</style>
